(function (p) { /* Sai.Calendar.Agenda.List */

    var List = function (container) {

        this.container = container;
        
        this.clear();

    }
    List.fn = List.prototype;


    EventDispatcher.prototype.apply(List.prototype);


    List.fn.load = function ( events ) {

        //var 
        var date;
        var id;
        var day;
        var days = {};
        
        this.clear();

        for (var i = 0; i < events.length; i++) {
            
            date    = new Date(Number(events[i].date));
            id      = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
            //console.log(id);
            if( !days[id] ){
                
                days[id] = []
                
            }
            days[id].push(events[i]);

        }
        //console.log(days);
        
        for (var i in days) {

            day = this.createDay(days[i][0].date, days[i]);

            this.container.append(day);

        }
        
    }


    List.fn.clear = function () {
        
        this.container.empty();
        
    }


    List.fn.createDay = function ( date, events ) {

        //console.log("createDay - date:"+date);
        //console.log(events);
        var date = new Date(Number(date));
        //console.log(date);
        var day = Sai.Calendar.DAYS_SHORT[date.getDay()] + " " +
                  date.getDate() + " de " +
                  Sai.Calendar.MONTHS_SHORT[date.getMonth()] + " de " +
                  date.getFullYear();  //"mié 5 de mar de 2014";

        var events;

        /* Crear día */
        var li = $([
            '<li>',
                '<strong>' + day + '</strong>',
                '<ul class="events">',
                '</ul>',
            '</li>'
        ].join(""));
        
        var today = new Date();
        
        if(today.getDate() == date.getDate() &&
           today.getMonth() == date.getMonth() &&
           today.getFullYear() == date.getFullYear()){
            
            li.addClass("today");
            
        }
        

        var eventsUl = li.find("ul");

        /* Crear eventos */
        for (var i = 0; i < events.length; i++) {
            event = this.createEvent(events[i].id,
                events[i].type,
                events[i].date,
                events[i].name);
            //console.log(event);
            event.children("span.hour").click($.proxy(this.onEventClick, this));
            event.children("button").click($.proxy(this.onEventClick, this));
            eventsUl.append(event);
        }

        return li;

    }


    List.fn.createEvent = function ( id, type, date, name ) {
        
        var date    = new Date(Number(date));
        var hour    = date.getHours();
        var minutes = date.getMinutes();
        
        if( hour < 10 ){ hour += "0" }
        if( minutes < 10 ){ minutes += "0" }
        
        var hour = hour + ":" + minutes + "hs";

        var li = $([
            '<li data-type="' + type + '">',
                '<span class="hour">' + hour + '</span>',
                '<button type="button">',
                    '<span class="icon squared-plus"></span>',
                    '<span class="icon squared-minus"></span>',
                    '<span class="icon star"></span>',
                    '<span class="icon globe"></span>',
                    '<span class="icon flag"></span>',
                    '<span class="icon inbox"></span>',
                    '<span class="icon user"></span>',
                    '<span class="text">' + name + '</span>',
                '</button>',
                '<ul class="info">',
                    '<li>',
                        '<strong>Curso:</strong> <a href="">Curso B</a>',
                    '</li>',
                    '<li>',
                        '<a href="cambiar-fecha?id=' + id + '" class="button"><span class="icon calendar"></span> Cambiar fecha</a>',
                        '<a href="ver-info?id=' + id + '" class="button"><span class="icon circled-plus"></span> Ver más información</a>',
                        '<a href="editar?id=' + id + '" class="button"><span class="icon pencil"></span> Editar</a>',
                    '</li>',
                '</ul>',
            '</li>'
        ].join(""));

        return li;
    }


    List.fn.showAll = function () {

        this.container.find("ul.events > li").addClass("opened");

    }


    List.fn.hideAll = function () {

        this.container.find("ul.events > li").removeClass("opened");

    }


    List.fn.onEventClick = function (event) {

        var button  = $(event.currentTarget);
        var li      = button.parent();
        var ul      = li.children("ul");

        li.toggleClass("opened");
        //ul.toggle();
        //console.log( $(event.currentTarget) );
        //console.log(ul);

    }

    p.List = List;

})(Sai.Calendar.Agenda);